<!-- 首页 -->
<template>
  <div>
    <div v-if="false" id="gitea"></div>

    <div v-if="false" id="git"></div>

    <el-scrollbar v-if="false" height="600px">
    <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
  </el-scrollbar>

  <el-button v-if="false" @click='send'>发送</el-button>



  <div class="virtual-table">
    <div class="table-header">
      <div class="column">姓名</div>
      <div class="column">年龄</div>
      <div class="column">职业</div>
    </div>
    <div class="table-body" ref="tableBody" @scroll="handleScroll">
      <div :style="{'height':`${totalData.length * 36}px`}"></div>
      <div style="position: absolute;top: 0px;width: 100%;" class="row_ab">
        <div class="row" v-for="row in visibleRows" :key="row.id">
        <div class="column">{{ row.name }}</div>
        <div class="column">{{ row.age }}</div>
        <div class="column">{{ row.job }}</div>
      </div>
      </div>
      
    </div>
  </div>

  </div>
 
      
  </template>
  
  <script setup name="home">

import {
    reactive,
    onMounted,
    ref,
    watch,
    nextTick,
    onActivated,
    markRaw,
    defineAsyncComponent,
  } from "vue";

  import {getGitee,getGitee2} from "../../api/project";


  const totalData = reactive(Array.from({ length: 90000 }, (_, index) => ({
  id: index,
  name: `姓名${index}`,
  age: Math.floor(Math.random() * 50),
  job: `职业${index}`
})));

const visibleRows = ref([]);
const startIndex = ref(0);
const endIndex = ref(15);
let pageSize = ref(1)
const rowHeight = 36; // 假设每行的高度为30px


const tableBody = ref(null);

onMounted(() => {
  updateVisibleRows();
});

function updateVisibleRows() {
  
  document.querySelector('.row_ab').style.top = `${startIndex.value * rowHeight}px`
  visibleRows.value = totalData.slice(startIndex.value, endIndex.value);
}


function handleScroll(e) {

  const scrollTop = tableBody.value.scrollTop;
  
  const visibleHeight = tableBody.value.clientHeight;

  startIndex.value = Math.floor(scrollTop / rowHeight);
  endIndex.value = startIndex.value + Math.ceil(visibleHeight / rowHeight) 
  
  updateVisibleRows()
 


}



let loginGitea = () => {
  let formData = {
    _csrf:'PMa4FapBPEU_jtPz_r1Qz6zKZ2E6MTczMjI0NDQ3MzkzOTE5OTczMQ',
    user_name:'jianghao',
    password:'12345678'
  }


  fetch('/giteaLogin', { // 替换 YOUR_ENDPOINT_URL 为实际的 API 端点
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    // 如果需要的话，添加其他头部，比如认证信息
  },
  body: new URLSearchParams(formData).toString()
})

setTimeout(async()=>{
 let res =await fetch('/gitea', { // 替换 YOUR_ENDPOINT_URL 为实际的 API 端点
  method: 'GET',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',

  },
 
})

let text = await res.text()
let div = document.createElement('div')
    div.innerHTML = text.toString()
    document.querySelector('#gitea').append(div)


},1000)

}



  let send = () => {
// // 表单数据
// const formData = {
//   _csrf:'FKgmM1wvZTi8zrBotMczp8PlLbs6MTczMjI0NjE1MzkwNzkxMDAzMA',
//   title:'1551535253',
//   content:'wowowowo22221123123',
//   edit_mode:true,
// };

// // 将对象转换为键值对字符串
// const formBody = new URLSearchParams(formData).toString();

// // 发送 POST 请求
// fetch('/giteaSub/', { // 替换 YOUR_ENDPOINT_URL 为实际的 API 端点
//   method: 'POST',
//   headers: {
//     'Content-Type': 'application/x-www-form-urlencoded',

//   },
//   body: formBody
// })

// .then(data => console.log(data)) // 处理返回的数据
// .catch(error => console.error('Error:', error)); // 处理错误




var myHeaders = new Headers();

myHeaders.append("Accept", "*/*");
myHeaders.append("Host", "192.168.31.173:3000");
myHeaders.append("Connection", "keep-alive");
myHeaders.append("Content-type", " application/x-www-form-urlencoded");

var urlencoded = new URLSearchParams();
urlencoded.append("_csrf", "FKgmM1wvZTi8zrBotMczp8PlLbs6MTczMjI0NjE1MzkwNzkxMDAzMA");
urlencoded.append("title", "wowowowo12312312313");
urlencoded.append("content", "wowowowo2222");
urlencoded.append("edit_mode", true);

var requestOptions = {
   method: 'POST',
   headers: myHeaders,
   body: urlencoded,
   redirect: 'follow'
};

fetch("/giteaSub", requestOptions)
   .then(response => response.text())
   .then(result => console.log(result))
   .catch(error => console.log('error', error));

  }


  // 页面加载时
  onMounted(async () => {
    loginGitea()
  //      const cookies = {
  //   'BAIDUID_BFESS': '025503A20485E78A8DC7F64E8C275B60:FG=1',
  //   'BEC': '1f1759df3ccd099821dcf0da6feb0357',
  //   'HMACCOUNT': '26991EE8D58D6A39',
  //   'HMACCOUNT_BFESS':'26991EE8D58D6A39',
  //   'Hm_lpvt_24f17767262929947cc3631f99bfd274':'1732171957',
  //   'Hm_lvt_24f17767262929947cc3631f99bfd274':'1732171285',
  //   'gitee-session-n':'MjFucFJkcEx6dVhteDJzM0d6bys4Yzc0M21KZ3FpNkVrdnFOQStyNVA1aHVubDVVNEdjWWNhOXZoWW9KUWVOc2Ryamp0YVdJcHhLa1ZhWm4ycEQ1MVgvbVhlK2NmdmJWczgwVVVRUE9NdW1yN2pPZ0hHbTZYYmJrcE5DUUR0eTM3S0YxMlp1eTJjVURhRy90WjluWGluckhJUWxVTE5DUVo4azB3dEdjMFF3NzBKSjFPeXRXM2RpaGZSR3duTFJTcHJhWUtqejRzY05kY0RQMkFYR1AyVGZ0VGN4UnYyQkgzRVdta3diTmxKTDFLN0FRVm1nMmlaSC9TYkFqYVdNQmY0TXFGMTFUb1hwR1RJUWlSempUdXNaVWZMRkovZTMyS0lOWGl5V3luQVY5T1ZybGRIWnh5KzRCL1FCdXRBZlRKUHVKYURDSFQxdmI3N0kvYTJ6Ri9yWHFMTWtjZytza1YvcGdLSCs5N2RvbDE2L29IVXBKY3IwUmtHSHhTcy9GSWpQemR6TDcrOVBUbFAwRUNMczR1YnNhV2h1VG54azByeFdMQlZCbkVNQk54bjV4ZCtZTnhQdFNrdmtUeHhrZXRIRGN6RU54WWpxTkdRWk1GRGtKZE9iQnpzd0l6RWdWWDR1UCtTRlJ4cHVEV1VpbW5uRC9vb01ZSUIrOTl6cTEwWS9iQUc2a0V1Tko3YW5lcUp4d1VoekRoM2FoUmJWMVFPTFpkNmM0RCtkUDNwby9EaHEwUFhERFRHV2hRUFhyQXgreWh2OG9QMlVTRFZIdkgyWng0VmZZMU9TZnk1SWhEM1NLZ1c4RXJhVT0tLStFZlBpdzJmMGg1WGxxTkJrMW5EMGc9PQ%3D%3D--09da33f7139cb5b8192c212f711d81597c921461',
  //   'gitee_user':'true',
  //   'oschina_new_user':'false',
  //   'remember_user_token':'BAhbCFsGaQMr%2Br9JIiIkMmEkMTAkbUpzWW1EL3dQRGFaUDlXZWlBTk5HdQY6BkVUSSIXMTczMjE3MTMwMy41NDQ2NjIyBjsARg%3D%3D--c113a92281fa6752f65111882a4c905f68369b9f',
  //   'sl-session':'QTxiNH0nQGepLE2GWU55zg==',
  //   'tz':'Asia%2FShanghai',
  //   'user_locale':'zh-CN'
  // };
  
  // for (const [key, value] of Object.entries(cookies)) {
  //   document.cookie = `${key}=${value}`;
  // }
  // setTimeout(()=>{  

  //   renderGit()

  // },1000)
   
  });

let renderGit  =async () => {
    let dataArr = []
    let res = await getGitee()
    let div = document.createElement('div')
    div.innerHTML = res.data
    document.querySelector('#git').append(div)
    console.log(div)
    div.querySelectorAll('.issue-wrapper').forEach(v=>{
      dataArr.push({
        title:v.querySelector('a').innerText,
        id:v.querySelector('.issue-ident').innerText,
        name:v.querySelector('.author').innerText,
        time:v.querySelector('.timeago').getAttribute('datetime')
      })

    })
    console.log(dataArr)
}
  
  
  </script>
  
  <style scoped lang="scss">
.virtual-table {
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
}

.table-header {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.table-body {
  height: 350px;
  overflow-y: auto;
  position: relative;
}

.row {
  display: flex;
  border-bottom: 1px solid #eee;
  
  width: 100%;
}

.column {
  flex: 1;
  padding: 8px;
  text-align: center;
}
  </style>
  